@use '../../shared/styles/properties';
@use '../../shared/styles/theme';
@use '../../shared/styles/utils';

@include utils.dark-theme {
	--popover-bg: var(--color-background--lighten-15);
	--gl-walkthrough-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 4%);
	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 6%);
	--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 8%);
}

@include utils.light-theme {
	--popover-bg: var(--color-background--darken-15);
	--gl-walkthrough-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 2%);
	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 4%);
	--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 6%);
}

* {
	box-sizing: border-box;
}

// avoids FOUC for elements not yet called with `define()`
:not(:defined) {
	visibility: hidden;
}

[hidden] {
	display: none !important;
}

html {
	height: 100%;
	font-size: 62.5%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

body {
	padding: 0;
	background-color: var(--color-view-background);
	color: var(--color-view-foreground);
	font-family: var(--font-family);
	min-height: 100%;
	line-height: 1.4;
	font-size: var(--vscode-font-size);
	height: 100%;
}

body[data-placement='editor'] {
	background-color: var(--color-background);
}
